<template>
  <div :id="id" :style="{ height: height, width: width }"></div>
</template>

<script>
export default {
  name: "LineChart",
  props: {
    className: {
      type: String,
      default: "lineChart",
    },
    id: {
      type: String,
      default: "lineChart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    lineChartData: {
      type: Object,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      // console.log(this.lineChartData.data);
      // 将父组件中传入的值重组成需要的格式
      let series = this.lineChartData.data.map((e) => {
        return {
          data: e.data.map((el) => el.value),
          type: "line",
        };
      });

      let xAxisData = this.lineChartData.data.map((e) => {
        return e.data.map((el) => el.time);
      });
      // console.log(series);
      // console.log(xAxisData);
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.id));
      // 绘制图表

      let options = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxisData[0]
        },
        grid: {
          top: "35%",
          bottom: "15%",
        },
        title: {
          show: true,
          text: this.lineChartData.title,
          textStyle: {
            color: "rgb(149,149,149)",
            fontWeight: "normal",
            fontSize: 14,
          },
          top: 10,
        },
        yAxis: {
          type: "value",
        },
        series: series,
      };

      myChart.setOption(options);
      //
    },
  },
};
</script>

<style></style>
